<!-- 2.实名认证 -->
<template>
  <div style="width:100%">
    <a-row style="padding-top:80px" :gutter="48">
      <a-col :md="18" :sm="24" :offset="8">
        <div class="card-view">
          <div class="card-view-label">{{ $t('all.autotext977') }}:</div>
          <div>{{ info.name }}</div>
        </div>
        <div class="card-view">
          <div class="card-view-label">{{ $t('all.autotext689') }}:</div>
          <div>{{ info.idCard }}</div>
        </div>
        <div class="card-view">
          <div class="card-view-label">{{ $t('all.autotext709') }}:</div>
          <div>{{ info.phone }}</div>
        </div>
      </a-col>
    </a-row>
    <a-row style="margin-top:20px" :gutter="48">
      <a-col :md="18" :sm="24" :offset="8">
        <a-button type="primary" :style="{ 'margin': '50px 50px 0 0'}" @click="validAction">{{ isValid == 1 ? '返回上一步' : $t('all.autotext42') }}</a-button>
        <a-button v-if="type == 0" @click="nextStep">{{ $t('all.autotext8') }}</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: '',
  props: {
    info: {
      type: Object,
      default: null
    },
    type: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      httpUrl: '',
      timeout: null,
      qrUrl: '',
      isValid: 0 // 1认证失败
    }
  },
  mounted () {
    this.httpUrl = window.location.origin + '/'
  },
  methods: {
    validAction () {
      if (this.isValid === 1) {
        this.$emit('backStep', 1)
      } else {
        if (this.info.status === false) {
          this.isValid = 1
          this.$notification.error({
            message: this.$t('all.autotext40'),
            description: this.$t('all.autotext1002')
          })
        } else {
          this.$notification.success({
            message: this.$t('all.autotext365')
          })
          this.nextStep()
        }
      }
    },
    creatQrCode () {
      this.qrUrl = this.httpUrl + 'attestation?params=' + this.getParams()
    },
    // 获取参数
    getParams () {
      const param = {
        name: this.info.name,
        idCard: this.info.idCard,
        phone: this.info.phone,
        token: storage.get(ACCESS_TOKEN)
      }
      return encodeURI(JSON.stringify(param))
    },
    nextStep () {
      this.$emit('nextStep', 1)
    }
  }
}
</script>

<style lang="less" scoped>
.qrcode{
  display: inline-block;
  img {
      width: 132px;
      height: 132px;
      background-color: #fff; //设置白色背景色
      padding: 6px; // 利用padding的特性，挤出白边
      box-sizing: border-box;
  }
}
.card-view{
  font-size: 16px;
  display: flex;
  margin-top: 10px;

  &-label{
      width: 90px;
      text-align: right;
      padding-right:15px ;
    }

}
</style>
